/*
 * @Description: 测肤部位导航组件
 * @Author: kanglin
 * @Date: 2018-09-06 11:11:30
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    .v-com-position-nav{
        .nav__list{
			margin-top: 9px; // ??
            position: relative;
            font-size: 0;
			display: inline-block;
			white-space: nowrap;
            .nav__list__item{
                display: inline-block;
                width: 107*@rem-per-px;
                height: 107*@rem-per-px;
                margin-right: 24*@rem-per-px;
				border-radius: 8*@rem-per-px;
                cursor: pointer;
                &>img{
                    width: 70*@rem-per-px;
                    text-align: center;
					padding: 8*@rem-per-px 20*@rem-per-px 0;
					 
                }
            }
            .nav__list__item__name{
                // font-size: 10*@rem-per-px;
                color: #999999;
                line-height: 18*@rem-per-px;
				text-align: center;
				font-size: 16*@rem-per-px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
            }

            .nav__list__item-active{
				    border-radius: 4px;
					box-shadow: 0 0 0 2px #FFBED6;
				.nav__list__item__name{
					color: #666;
				}
            }
            // .nav__list__bg{
            //     position: absolute;
            //     border: 1px solid rgba(224,153,236,1);
            //     width: 110*@rem-per-px;
            //     height: 110*@rem-per-px;
            //     border-radius: 8*@rem-per-px;
            //     background:linear-gradient(90deg,rgba(208,171,250,1) 0%,rgba(224,153,236,1) 100%);
            // }
        }
    }
</style>

<template>
	<div class="v-com-position-nav">
		<ul class="nav__list">
			<div
				:style="getStyle"
				class="nav__list__bg"/>
			<li
				v-for="(item, index) in items"
				:key="index"
				:class="{'nav__list__item-active': active_index === index}"
				class="nav__list__item"
				@click="activeNavItem(index)">
				<img
					:src="item.thumb"
					alt="">
				<p class="nav__list__item__name">
					{{ item.name }}
				</p>
			</li>
		</ul>
	</div>
</template>

<script>
// const ITEM_WIDTH = 110 + 2; // 边框+宽
// const ITEM_MARGIN_RIGHT = 24;

export default {
	name: 'PositionNav',
	props: {
		index: {
			type: Number,
			required: true,
		},
		items: {
			type: Array,
			required: true,
		},
	},
	data() {
		return {
			active_index: 0,
		};
	},
	computed: {
		getStyle() {
			return {};
			// if (this.active_index === 0) {
			// 	return { left: 0 };
			// }
			// const offset_left = this.active_index * (ITEM_WIDTH + ITEM_MARGIN_RIGHT);
			// debugger
			// return { left: `${window.lib.flexible.px2rem(offset_left)}rem` };
		},
	},
	watch: {
		index() {
			this.active_index = this.index;
		},
	},
	created() {
		this.active_index = this.index;
		// this.sendChangeEvent(this.index);
	},
	methods: {

		/**
		 * 导航栏切换
		 * @param  {Number} index {索引值}
		 * @return {undefined} {description}
		 */
		activeNavItem(index) {
			
			this.active_index = index;
			this.sendChangeEvent(index);
		},

		sendChangeEvent(index) {
			this.$emit('selected', index);
			this.$emit('update:index', index);
		},
	},
};
</script>

<style scoped>

</style>
